<template>
	<view class="content">

		<!-- 用户头像header -->
		<view class='member-top'>
			<image class='bg-img' src='/static/image/member-bg.jpg'></image>
			<view class='member-top-c'>
				<template v-if="hasLogin">
					<image class='user-head-img' mode="aspectFill" :src='userInfo.avatar'></image>
					<view class='user-name'>{{ userInfo.nickName }}</view>
					<view class="fz12 grade" v-if="userInfo.userName">
						{{userInfo.userName}}
					</view>
				</template>
				<template v-else>
					<!-- #ifdef H5 || APP-PLUS -->
					<image class='user-head-img' mode="aspectFill" :src='$store.state.config.shop_logo'></image>
					<view class="login-btn" @click="toLogin">
						登录/注册
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="user-head-img">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view>
						<!-- open-type="getUserInfo" @getuserinfo="getUserInfo" -->
						<button class="login-btn" hover-class="btn-hover" @click="goLogin()">授权登录</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<view class="user-head-img"></view>
					<view>
						<button class="login-btn" open-type="getAuthorize" @click="getALICode"
							hover-class="btn-hover">授权登录</button>
					</view>
					<!-- #endif -->
				</template>

			</view>
		</view>
		<!-- 用户头像header end -->

		<!-- 列表信息 -->

		<uni-grid :column="3" :highlight="true" borderColor="#ffdc14" :square="false">
			<uni-grid-item v-for="(item, index) in utilityMenus" :key="index">
				<view class="grid-item-box" style="background-color: #fff;" @click="navigateToHandle(item.router)">
					<view class="badge color-f" v-if="item.unshowBadge">{{item.badgeValue}}</view>
					<image class='image' :src='item.icon'></image>
					<text class="text">{{item.name}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>


<script>
	import {
		checkLogin
	} from '@/config/mixins.js'
	export default {
		components: {

		},
		mixins: [checkLogin],
		data() {
			return {
				open_id: '',
				hasLogin: false,
				userInfo: {}, // 用户信息
				kefupara: '', //客服传递资料
				afterSaleNums: 0,
				isClerk: false,
				alipayNoLogin: true,
				alipayName: '',
				alipayAvatar: '',
				config: '', //配置信息
				utilityMenus: {
					myNote: {
						name: '检索记录',
						icon: '/static/image/zoom.png',
						router: '/pages/index/search',
						unshowBadge: true,
						badgeValue: 100
					},
					addNote: {
						name: '添加记录',
						icon: '/static/image/compile.png',
						router: '../note/noteAdd',
						unshowBadge: false,
						badgeValue: 0
					},
					coupon: {
						name: '文心一言',
						icon: '/static/image/ic-me-coupon.png',
						router: '../coupon/index',
						unshowBadge: false,
						badgeValue: 0
					},
					integral: {
						name: '历史上的今天',
						icon: '/static/image/integral.png',
						router: '../integral/index',
						unshowBadge: true,
						badgeValue: 0
					},
					address: {
						name: '地址管理',
						icon: '/static/image/me-ic-site.png',
						router: '../address/list',
						unshowBadge: true,
						badgeValue: 0
					},
					setting: {
						name: '系统设置',
						icon: '/static/image/me-ic-set.png',
						router: '../setting/index',
						unshowBadge: false,
						badgeValue: 0
					}
				},

			}
		},
		onShow() {
			this.initData()
		},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/choose/index'
				})
			},
			getUserInfo(e) {
				let _this = this
				//return false;
				if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
					_this.$common.errorToShow('未授权')
				} else {
					var data = {
						open_id: _this.open_id,
						iv: e.detail.iv,
						edata: e.detail.encryptedData,
						signature: e.detail.signature
					}
					_this.toWxLogin(data)
				}
			},
			getALICode() {
				let that = this
				
			},
			getWxCode() {
				let that = this
				
			},
			wxLoginStep1(code) {
				this.$api.login1({
					code
				}, res => {
					if (res.status) {
						this.open_id = res.data
					} else {
						this.$common.errorToShow(res.msg, function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			aLiLoginStep1(code, user_info) {
				let data = {
					'code': code,
					'user_info': user_info
				}
				this.$api.alilogin1(data, res => {
					this.alipayNoLogin = false;
					if (res.status) {
						this.open_id = res.data.user_wx_id
						//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
						if (!res.data.hasOwnProperty('token')) {
							this.$common.redirectTo('/pages/login/login/index?user_wx_id=' + res.data.user_wx_id);
						} else {
							this.$db.set('userToken', res.data.token)
							this.initData()
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			toWxLogin(data) {
				let _this = this
				_this.$api.login2(data, function(res) {
					if (res.status) {
						//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
						if (typeof res.data.token == 'undefined') {
							uni.redirectTo({
								url: '/pages/login/login/index?user_wx_id=' + res.data.user_wx_id
							})
						} else {
							_this.$db.set('userToken', res.data.token)
							_this.initData()
						}
					} else {
						_this.$common.errorToShow('登录失败，请重试')
					}
				})
			},
			toLogin() {
				this.$common.navigateTo('../../login/login/index1')
			},
			initData() {
				// 获取用户信息
				var _this = this
				//判断是开启分销还是原始推广

				if (this.$db.get('userToken')) {
					this.hasLogin = true
					this.$api.getUserInfo().then(res => {

						this.userInfo = res.user
						if (this.userInfo.avatar || this.userInfo.avatar === '') {
							this.userInfo.avatar = "http://yhl.zone/static/img/profile.473f5971.jpg"
						}
						this.$db.set("userInfo", this.userInfo)
						this.$db.set("userRoles", res.roles)
						this.$db.set("userPermissions", res.permissions)
					});
				} else {
					this.hasLogin = false
					// #ifdef MP-WEIXIN
					this.getWxCode()
					// #endif
				}
				//加载记录数量
				this.$api.getNoteList({
					pageNum: 1,
					pageSize: 0,
				}).then(res => {
					this.utilityMenus.myNote.badgeValue = res.total
				});
			},
			navigateToHandle(pageUrl) {
				console.info(pageUrl)
				console.info(!this.hasLogin)
				if (!this.hasLogin) {
					return this.checkIsLogin()
				}
				uni.navigateTo({
					url: pageUrl,
					fail: function(e) {
						console.info(e)
						uni.showToast({
							title: "敬请期待~~~",
							icon: "loading",
						})
					}
				})
			},
			orderNavigateHandle(url, tab = 0) {
				if (!this.hasLogin) {
					return this.checkIsLogin()
				}
				this.$store.commit('orderTab', tab)
				this.$common.navigateTo(url)
			},
			goAfterSaleList() {
				if (!this.hasLogin) {
					return this.checkIsLogin()
				}
				this.$common.navigateTo('../after_sale/list')
			},
			//在线客服,只有手机号的，请自己替换为手机号
			showChat() {
				// #ifdef H5
				let _this = this
				window._AIHECONG('ini', {
					entId: this.config.ent_id,
					button: false,
					appearance: {
						panelMobile: {
							tone: '#FF7159',
							sideMargin: 30,
							ratio: 'part',
							headHeight: 50
						}
					}
				})
				//传递客户信息
				window._AIHECONG('customer', {
					head: _this.userInfo.avatar,
					'名称': _this.userInfo.nickname,
					'手机': _this.userInfo.mobile
				})
				window._AIHECONG('showChat')
				// #endif

				// 拨打电话
				// #ifdef APP-PLUS
				if (this.kfmobile) {
					uni.makePhoneCall({
						phoneNumber: '' + this.kfmobile,
						success: () => {
							// console.log("成功拨打电话")
						}
					})
				} else {
					this.$common.errorToShow('商户未设置客服手机号')
				}
				// #endif
			}
		},
		computed: {
			// 获取店铺联系人手机号
			kfmobile() {
				return this.$store.state.config.shop_mobile || 0
			}
		},
		watch: {}
	}
</script>


<style>
	.member-top {
		position: relative;
		width: 100%;
		height: 340upx;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.member-top-c {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.user-head-img {
		display: block;
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		margin: 0 auto 16upx;
	}

	.user-name {
		font-size: 30upx;
		color: #fff;
		margin-bottom: 16upx;
	}

	.grade {
		color: #FFF;
	}

	.member-grid {
		background-color: #fff;
		border-top: 2upx solid #eee;
		padding: 20upx 0;
	}

	.margin-cell-group {
		margin: 20upx 0;
		color: #666666;
	}

	.badge {
		left: 80upx;
		top: -6upx;
	}

	button.cell-item-hd {
		background-color: #fff;
		padding: 0;
		line-height: 1.4;
		color: #333;
	}

	button.cell-item-hd:after {
		border: none;
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #ff7159;
		font-size: 12px;
	}


	/* 宫格的样式 开始*/
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
	/* 宫格的样式 结束*/
	/* 角标 开始*/
	.badge {
		display: inline-block;
		position: absolute;
		min-width: 20px;
		height: 20px;
		line-height: 20px;
		background-color: #FF7159;
		color: #fff;
		font-size: 12px;
		border-radius: 50upx;
		padding: 0 3px;
		margin-top: 10px;
		text-align: center;
		z-index: 99;
	}

	/* 角标 结束*/
</style>